<template>
	<view :class="['chat-item', chat.originalData.onTop && 'top', active && 'active']" @tap.stop.native="showChatBox()">
		<!--rich-text中的表情包会屏蔽事件，所以这里用一个遮罩层捕获点击事件 -->
		<view class="left">
			<head-image :url="chat.headImage" :name="chat.showName" :size="100" :isGroup="chat.type == 'GROUP'"
				:url-params="urlParams"></head-image>
		</view>
		<view class="chat-right">
			<view class="chat-name">
				<view class="chat-tag"
					v-if="chat.type == 'GROUP' && (chat.originalData.groupType == 1 || chat.originalData.groupType == 2)">
					<view v-if="chat.originalData.groupType==2">
						<badge type="business-group" :title="badgeTitle"></badge>
					</view>
					<view v-if="chat.originalData.groupType==1">
						<badge type="friend-group"></badge>
					</view>
					<!-- <up-tag :text="isCompany && chat.originalData.isCompanyBaseGroup && '总群' || '群'" size="mini"
						type="primary"></up-tag> -->
				</view>
				<view class="chat-tag" v-if="chat.type=='BUSINESS'">
					<badge type="friend-group"></badge>
				</view>
				<view class="chat-name-text">
					{{ chat.showName }}
				</view>
				<view class="chat-time">{{ $date.toTimeText(chat.lastSendTime, true) }}</view>
			</view>
			<view class="ycb"
				v-if="chat.type == 'GROUP' && (chat.originalData.groupType !=0)">
				<BoardPanel width="150" v-model="chat.targetId" />
			</view>
			<view class="chat-content">
				<view class="chat-at-text">{{ atText }}</view>
				<view class="chat-send-name" v-if="isShowSendName">{{ chat.sendNickName + ':&nbsp;' }}</view>
				<!-- <rich-text class="chat-content-text" :nodes="$emo.transform(chat.lastContent)"></rich-text> -->
				<view class="chat-content-text">
					<!--{{chat.lastContent}}-->
					{{lastMessageContent}}
				</view>
				<view>
					<up-badge :max="99" :value="chat.unreadCount" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import BoardPanel from '@/components/board-panel/board-panel.vue';
	export default {
		name: "chatItem",
		components: {
			BoardPanel
		},
		data() {
			return {}
		},
		props: {
			chat: {
				type: Object
			},
			sourceType: {
				type: Number,
				required: true
			},
			active: {
				type: Boolean,
				default: false
			},
			chatType: {
				type: String,
				default: "PRIVATE"
			},
			isCompany: {
				type: Boolean,
				default: false
			},
			urlParams: {
				type: Object,
				default: () => {}
			},
		},
		methods: {
			showChatBox() {
				if(this.chat.showName == "友星缘助手"){
					uni.navigateTo({
						url:"/pageSubOne/friend/friend-helper"
					})
					return
				}
				let id = null
				uni.navigateTo({
					url: `/pageSubOne/chat/chat-box?id=${this.chat.targetId}&type=${this.chat.type}&sourceType=${this.sourceType}`
				})
			}
		},
		computed: {
			lastMessageContent() {
				const lastContent = this.chat.lastContent

				const isJsonString = (str) => {
					try {
						const parsed = JSON.parse(str)
						return typeof parsed === 'object' && parsed !== null;
					} catch (error) {
						return false
					}
				}
				if (isJsonString(lastContent)) {
					try {
						const content = JSON.parse(lastContent)
						if (content.originUrl && content.thumbUrl) {
							return "[图片]"
						}
						if (content.name && content.size && content.url) {
							const fileExtension = content.name.split(".").pop().toLowerCase();
							if (fileExtension === 'doc' || fileExtension === 'docx') {
								return "[Word文件]"
							} else if (fileExtension === 'pdf') {
								return "[PDF文件]"
							} else {
								return "[文件]"
							}
						}
						if(content.duration && content.url){
							return "[语音]"
						}
					} catch (error) {
						return lastContent
					}
				}
				return lastContent;
			},
			isShowSendName() {
				if (!this.chat.sendNickName) {
					return false;
				}
				let size = this.chat.messages.length;
				if (size == 0) {
					return false;
				}
				// 只有群聊的普通消息需要显示名称
				let lastMsg = this.chat.messages[size - 1];
				return this.$msgType.isNormal(lastMsg.type)
			},
			atText() {
				if (this.chat.atMe) {
					return "[有人@我]"
				} else if (this.chat.atAll) {
					return "[@全体成员]"
				}
				return "";
			},
			badgeTitle() {
				let firstFour = this.chat.originalData.name.slice(0, 4);
				const lastTwo = firstFour.slice(-2); // 获取前4个字符的最后2个字符
				if (firstFour.length === 4 && ["官", "民", "社", "在"].includes(firstFour.slice(-1))) {
					// 如果最后一个字是“官”，则删除它
					firstFour = firstFour.slice(0, 3);
				}
				if (lastTwo === "村村") {
					firstFour = firstFour.slice(0, 3);
				}
				return firstFour
			}
		}
	}
</script>

<style scoped lang="scss">
	.chat-item {
		display: flex;
		position: relative;
		padding: 10rpx 20rpx;
		align-items: center;
		background-color: white;
		white-space: nowrap;
		border-bottom: #eef0f3 solid 1rpx;

		&:hover {
			background-color: #FAFAFA;
		}

		&.active {
			background-color: #FAFAFA;
		}

		&.top {
			background-color: #eff4ff;
		}

		.mask {
			position: absolute;
			width: 100%;
			height: 100%;
		}

		.left {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.chat-right {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding-left: 20rpx;
			text-align: left;
			overflow: hidden;
			gap: 4px;

			.ycb {
				pointer-events: none;
			}

			.chat-name {
				display: flex;
				align-items: center;
				gap: 8px;

				.chat-tag {
					display: flex;
					align-items: center;
					margin-right: 8rpx;
					// margin-top: 5rpx;
				}

				.chat-name-text {
					flex: 1;
					font-size: 16px;
					font-weight: 500;
					line-height: 24px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					color: $gray-900;
				}

				.chat-time {
					font-size: 12px;
					line-height: 18px;
					text-align: right;
					color: $gray-600;
					white-space: nowrap;
					overflow: hidden;
				}
			}

			.chat-content {
				display: flex;
				align-items: center;

				.chat-at-text {
					color: #c70b0b;
					font-size: 24rpx;
				}

				.chat-send-name {
					font-size: 26rpx;
					color: #8f959c;
				}

				.chat-content-text {
					flex: 1;
					font-size: 28rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					color: #8f959c;
				}

			}
		}
	}
</style>